<template>
  <div class="app-container">


    <el-form inline ref="bannerForm" :model="bannerForm" label-width="80px">
      <el-form-item label="名称">
        <el-input v-model="bannerForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button @click="reset">置空</el-button>
        <el-button type="primary" @click="addBannerOpen">添加</el-button>
      </el-form-item>
    </el-form>

    <el-dialog
      title="添加轮播图"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="广告图" prop="imageUrl">
          <img @click="imagecropperShow=true" style="width: 640px;height: 357px;" :src="ruleForm.imageUrl" alt="">
          <image-cropper
            v-show="imagecropperShow"
            :width="640"
            :height="357"
            :key="imagecropperKey"
            url="/oss/avatar"
            field="file"
            @close="close"
            @crop-upload-success="cropSuccess"
          />
        </el-form-item>
        <el-form-item label="跳转地址" prop="linkUrl">
          <el-input v-model="ruleForm.linkUrl"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="ruleForm.sort" @change="handleChange" :min="1" :max="100"></el-input-number>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
  </span>
    </el-dialog>


    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="序号" width="95">
        <template slot-scope="scope">
          {{ scope.$index +1}}
        </template>
      </el-table-column>
      <el-table-column label="图标">
        <template slot-scope="scope">
          <img :src="scope.row.imageUrl" style="width: 160px;height: 89px;">
        </template>
      </el-table-column>
      <el-table-column label="名称"   align="center">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="排序"   align="center">
        <template slot-scope="scope">
          <el-tag >{{ scope.row.sort }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center"   label="创建时间" >
        <template slot-scope="scope">
          <i class="el-icon-time"/>
          <span>{{ scope.row.eduCreate }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"  label="操作"  >
        <template slot-scope="scope">
          <el-button type="primary" @click="handleClick(scope.row)" size="mini">修改</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)" size="mini">删除</el-button>
        </template>

      </el-table-column>

    </el-table>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page.current"
        :page-size="page.size"
        layout="total, prev, pager, next"
        :total="page.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>

import {deleteById, getPage, saveOrUpdate} from "../../api/banner";
import PanThumb from "../../components/PanThumb/index.vue";
import ImageCropper from "../../components/ImageCropper/index.vue";

export default {
  components: {PanThumb, ImageCropper},
  data() {
    return {
      list: [], // 列表数据
      listLoading: true,// 加载
      dialogVisible: false,// 弹框
      imagecropperShow: false, // 是否显示上传组件
      imagecropperKey: 0, // 上传组件id
      page: {
        current: 1,
        total: 0,
        size: 2
      },
      bannerForm:{
        name:'',
      },
     ruleForm: {
        id:'',
        title: '',
        sort: 0,
        imageUrl: 'https://zly-tlx.oss-cn-hangzhou.aliyuncs.com/banner/2024/06/01/1.jpg',
        linkUrl: '',
      },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        sort: [
          { required: true, message: '请选择排序', trigger: 'change' }
        ],
        imageUrl: [
          { required: true, message: '请上传广告图', trigger: 'change' }
        ],
        linkUrl: [
          { required: true, message: '请输入跳转地址', trigger: 'blur' }
        ],
      }
    }
  },
  // 初始化
  created() {
    this.fetchData()
  },
  methods: {
    //上传功能
    cropSuccess(data) {
      console.log(data)
      this.imagecropperShow = false
      this.ruleForm.imageUrl = data
      // 上传成功后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    // 关闭上传组件
    close() {
      this.imagecropperShow = false
      // 上传失败后，重新打开上传组件时初始化组件，否则显示上一次的上传结果
      this.imagecropperKey = this.imagecropperKey + 1
    },
    // 获取列表
    fetchData() {
      this.listLoading = true
      this.getPage()
    },
   // 修改
    handleClick(row) {
      this.dialogVisible = true
      this.ruleForm = row
    },
    // 排序
    handleChange(value) {
      this.ruleForm.sort = value
    },
    // 关闭
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 删除
    handleDelete(row){
      this.$confirm('此操作将删除该讲师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(row.id).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getPage()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.current=val
      this.getPage()
    },
    // 重置
    reset(){
      this.ruleForm={}
      this.getPage()
    },
    // 搜索
    onSubmit() {
      this.getPage()
    },
    // 分页
    getPage(){
      getPage(this.bannerForm,this.page.current).then(response => {
        this.list = response.data.records
        this.page = response.data
        this.listLoading = false
      })
    },
    // 添加
    addBannerOpen(){
      this.dialogVisible=true
      this.ruleForm={
        title: '',
        sort: 0,
        imageUrl: 'https://zly-tlx.oss-cn-hangzhou.aliyuncs.com/banner/2024/06/01/1.jpg',
        linkUrl: ''
      }
    },
    // 提交
    submitForm(){
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {//校验成功
          saveOrUpdate(this.ruleForm).then(response => {
            //跳到讲师列表
            this.$message.success("添加成功")
            this.dialogVisible=false
            this.getPage()
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    }
  },
}

</script>

<style scoped>

</style>
